(function () {
  // 步骤3：创建echarts实例
  let myChart = echarts.init(document.querySelector(".box3"));

  // 步骤4：定义配置（指定图表的配置项和数据）
  let option = {
    color: ["#50ebb7", "#52b0c7", "#10758f", "#16e4a6", "#03422f"],
    title: {
      text: "饼图",
      textStyle: {
        color: "#fff",
        fontSize: 20,
        fontWeight: "400",
      },
      // left: 10,
      // top: 20,
      x: "10",
      y: "10",
    },
    legend: [
      {
        //   top: "20",
        data: ["rose 1"],

        x: "85%",
        y: "20%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
      {
        //   top: "20",
        data: ["rose 2"],
        x: "85%",
        y: "30%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
      {
        //   top: "20",
        data: ["rose 3"],
        x: "85%",
        y: "40%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
      {
        //   top: "20",
        data: ["rose 4"],
        x: "85%",
        y: "50%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
      {
        //   top: "20",
        data: ["rose 5"],
        x: "85%",
        y: "60%",
        //   type:'scroll',
        itemHeight: "13",
        //   itemWidth: "13",
        align: "left",
        //   itemGap:'10',
        textStyle: {
          color: "#fff",
          fontSize: "10px",
        },
      },
    ],

    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [20, 90],
        center: ["45%", "55%"],
        // roseType: "area",

        itemStyle: {
          borderRadius: 0,
        },
        data: [
          { value: 7, name: "rose 1" },
          { value: 5, name: "rose 2" },
          { value: 15, name: "rose 3" },
          { value: 20, name: "rose 4" },
          { value: 18, name: "rose 5" },
        ],
      },
    ],
  };

  // 步骤5：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
  //   window.onresize = function () {
  //     myChart.resize();
  //   };
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
